<template>
	<div>
		<jk-table ref="machineTable" :show-footer="true" :footer-method="footerMethod" :highlight-hover-row="false" :stripe="false" :row-style="rowClassName" :span-method="mergeColMethod" border :data="tableData">
			<vxe-column title="机台" align="left" field="machineName" :width="110"></vxe-column>
			<vxe-column title="锭序" align="center" field="spinGroupIndex" :width="80"></vxe-column>
			<vxe-column title="锭组" align="center" field="criterion" :width="100">
				<template slot-scope="scope">
					<span>{{ `${scope.row.startSpinNumber}~${scope.row.endSpinNumber}` }}</span>
				</template>
			</vxe-column>
			<vxe-column title="品种" align="left" field="productModels" :width="170"></vxe-column>
			<vxe-column title="单价" align="right" field="price" :width="100"></vxe-column>
			<!--<vxe-column title="锭组工资" align="right" field="machineSingleSalary" :width="70"></vxe-column>-->
			<vxe-column title="人员" align="left" field="empName" :width="70"></vxe-column>
			<vxe-column title="实做产量" align="right" field="machineOutputKg" :width="140">
				<template slot-scope="scope">
					<jk-number-input v-model="scope.row.machineOutputKg" size="mini" @change="calItemMachine($event, scope, 'machineOutputKg')"></jk-number-input>
				</template>
			</vxe-column>
			<vxe-column title="人员锭组工资" align="right" field="singleSalary" :width="100"></vxe-column>
		</jk-table>
	</div>
</template>
<script>
    import { mathJsAdd, mathJsDiv, mathJsMul, mathJsSub } from '../../../../utils/jk/jk-cals';
    import mergeMixin from '../merge-mixin';
    import XEUtils from 'xe-utils';
    export default {
        mixins: [mergeMixin],
        props: {
            pageType: {
                type: String,
                default: ''
            },
            height: {
                type: Number,
                default: null
            },
            machineData: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                colors: ['#19be6b', '#2d8cf0'],
                lineObj: {},
                tableData: []
            };
        },
        methods: {
            footerMethod({ columns, data }) {
                const keys = ['machineOutputKg', 'machineSingleSalary'];
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计';
                        }
                        if (keys.includes(column.field)) {
                            return XEUtils.sum(data, column.field);
                        }
                        return null;
                    })
                ];
            },
            rowClassName({ row }) {
                // return {
                //     backgroundColor: this.lineObj[row.productionLineId].bgColor,
                //     color: '#fff'
                // };
            },
            onMachineOutputKg(e, scope) {
                this.tableData.forEach(x => {
                    if (x.machineId === scope.row.machineId) {
                        if (x.processCode.toUpperCase() === 'SM') {
                            x.empList.forEach(k => {
                                k.machineOutputKg = mathJsDiv(x.machineOutputKg, x.empList.length || 0);
                                k.empMachineSalary = parseFloat(mathJsMul(x.price, mathJsDiv(k.machineOutputKg, x.unit || 0)).toFixed(2));
                            });
                        }
                    }
                });
                this.calProcessTotal(scope.row.processId);
                this.updateData();
            },
            calItemMachine(e, scope, type) {
                this.$set(this.tableData[scope.rowIndex], 'singleSalary', mathJsMul(e || 0, scope.row.price || 0));
                this.updateData();
            },
            onPriceValChange(e, scope) {
                this.tableData.forEach(machineItem => {
                    if (machineItem.processId === scope.row.processId) {
                        this.$set(machineItem, 'price', e);
                    }
                });
                this.updateData();
            },
            onUnitValChange(e, scope) {
                this.tableData.forEach(machineItem => {
                    if (machineItem.processId === scope.row.processId) {
                        this.$set(machineItem, 'unit', e);
                    }
                });
                this.updateData();
            },
            updateData() {
                this.$emit('on-update', JSON.parse(JSON.stringify(this.tableData)));
            }
        },
        watch: {
            machineData: {
                handler(newVal) {
                    const cpData = JSON.parse(JSON.stringify(newVal));
                    this.lineObj = {};
                    this.tableData = cpData ? cpData.map(x => {
                        if (!this.lineObj[x.productionLineId]) {
                            idx = 0;
                            this.lineObj[x.productionLineId] = {
                                bgColor: this.colors[idx],
                                productionLineName: x.productionLineName
                            };
                        }
                        return x;
                    }) : [];
                    let idx = 0;
                    for (const item in this.lineObj) {
                        if (idx >= 2) idx = 0;
                        idx++;
                        this.lineObj[item].bgColor = this.colors[idx - 1];
                    }
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
<style scoped lang="scss">
.emp-container {
    box-sizing: border-box;
    .emp-item {
        box-sizing: border-box;
        //border: 1px solid #eee;border-bottom: none;
    }
    .emp-item:last-child {
        //border-bottom: solid 1px #eee;
    }
    .emp-item:hover {
        background: #2d8cf0;
        color: #fff;
    }
}
.emp-container:hover {
    color: #fff;
    .emp-item {
        background: #2d8cf0;
        border-color: #5cadff;
    }
}
</style>
